﻿@page "/"

@using MauiBlazorPhotoGallery.Data
@using Sve.Blazor.InfiniteScroll.Components
@inject MediaService mediaService

@if (items == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <InfiniteScroll ObserverTargetId="observerTarget" ObservableTargetReached="(e) => GetMediaItems()">
        <div class="grid">
            @foreach (var item in items)
            {
                <div class="grid-item">
                    <img src="@item.Link" />
                </div>
            }

            @*The target element that we observe. Once this is reached the callback will be triggered.*@
            <div id="observerTarget"></div>
        </div>
    </InfiniteScroll>
}

@code {
    private List<MediaItem> items = new();

    void GetMediaItems()
    {
        items.AddRange(mediaService.GetMediaItems(100));
    }
}
